@import '../../../common';


.answer-container {
	@include container;
	padding-bottom: 0;
	.quizzer {
		@include block();
		display: flex;

		.header-img {
			position: relative;
			@include size(98, 98, 0);
			image {
				@include size(98, 98, 50%);
			}
			text {
				display: block;
				position: absolute;
				bottom: 0;
				right: 0;
				background-color: var(--color-theme);
				@include size(36, 36, 4rpx);
				@include fontStyle(24, 24, #FFFFFF);
				@include flex-center;
			}
		}

		.info {
			margin-left: 16rpx;
			width: calc(100% - 98rpx - 16rpx);

			.phone {
				@include fontStyle(28, 28, #000000);
			}

			.question {
				@include fontStyle(32, 48, #000000);
				margin-top: 16rpx;
			}
		}
	}

	.hint {
		@include flex-center;
		background-color: #EAEEFE;
		height: calc(30rpx + 30rpx);
		border-radius: 30rpx;

		image {
			@include size(28, 28);
			margin-right:  4rpx;
		}

		text {
			@include fontStyle(28, 28, var(--color-theme));
		}
	}


	.answer-list {
		@include container;
		padding-bottom: 0;

		.item {
			@include block;
			@include flex;
			align-items: flex-start;

			.header-img {
				position: relative;
				@include size(62, 62, 0%);
				image {
					@include size(62, 62, 50%);
				}
				text {
					content: '答';
					display: block;
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: var(--color-theme);
					@include size(28, 28,  4rpx);
					@include fontStyle(22, 22, #FFFFFF);
					@include flex-center;
				}
			}

			.info {
				margin-left: 16rpx;
				width: calc(100% - 62rpx - 16rpx);

				.phone {
					@include fontStyle(28, 28, #000000);
				}

				.type {
					@include fontStyle(28, 28, #666666);
					margin-top: 16rpx
				}

				.answer-content {
					@include fontStyle(28, 42, #000000);
					margin-top:  24rpx
				}

				.imgs {
					image {
						display: block;
						width: 120rpx;
						height: 120rpx;
						margin-top:  24rpx;
						margin-right:  24rpx;
					}
				}
			}
		}
	}
}